import { h, defineComponent, ref, onMounted, onUnmounted } from '@vue/runtime-core';
import mapImg from '../../assets/map.jpg'
import { game } from '../Game'
import { stage } from '../config/index'

// 只展示 map
export default defineComponent({
  setup(props, ctx) {
    const viewHeight = stage.height;  // 图的高度
    let mapY1 = ref(0);    // 图一的 y 坐标
    let mapY2 = ref(-viewHeight); // 图二的 Y 坐标

    // 无缝轮播，使用 pixi.js 中封装的事件循环 ticker，实现 interval
    const speed = 5;  // 速度

    const handlderTicker = () => {
      mapY1.value += speed;
      mapY2.value += speed;

      if (mapY1.value >= viewHeight) {
        mapY1.value = -viewHeight;
      }
      if (mapY2.value >= viewHeight) {
        mapY2.value = -viewHeight;
      }
    }

    onMounted(() => {
      game.ticker.add(handlderTicker)
    })

    onUnmounted(() => {
      game.ticker.remove(handlderTicker)
    })

    return {
      mapY1,
      mapY2
    }
  },
  render(ctx) {
    return h("Container", [
      h("Sprite", {
        texture: mapImg,
        y: ctx.mapY1
      }),
      h("Sprite", {
        texture: mapImg,
        y: ctx.mapY2
      })
    ])
  }
})